/*
 * Ext GWT - Ext for GWT
 * Copyright(c) 2007-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
package org.lifebudget.app.client.mvc.view;

import org.lifebudget.app.client.events.AppEvents;
import org.lifebudget.app.client.mvc.model.LoginInfo;

import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.Padding;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.HtmlContainer;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.HBoxLayout;
import com.extjs.gxt.ui.client.widget.layout.HBoxLayoutData;
import com.extjs.gxt.ui.client.widget.layout.HBoxLayout.HBoxLayoutAlign;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * Main view for the LifeBudget application.  Provides the viewport
 * and main Border Layout for the application including the header and footer.
 * 
 */
public class AppView extends View {

	/** The Constant VIEWPORT. */
	public static final String VIEWPORT = "viewport";
	
	/** The Constant CENTER_PANEL. */
	public static final String CENTER_PANEL = "center";

	/** The main viewport of the application. */
	private Viewport viewport;
	
	/** The center container for holding the non-header and non-footer part of the application. */
	private LayoutContainer center;

	/** The current user's login information. */
	private LoginInfo loginInfo;

	/** The sign out link. */
	private Anchor signOutLink;

	/**
	 * Instantiates a new app view.
	 *
	 * @param controller the controller
	 */
	public AppView(Controller controller) {
		super(controller);
	}

	/* (non-Javadoc)
	 * @see com.extjs.gxt.ui.client.mvc.View#initialize()
	 */
	protected void initialize() {

	}

	/**
	 * Handles the <code>Login</code> event, creating the view 
	 * components for logging in, adding them to the GWT Root
	 * panel. In the current google user environment, this method should
	 * never get called, but it exists for if the user is not logged 
	 * in.
	 */
	private void initLogin() {
		VerticalPanel loginPanel = new VerticalPanel();
		Label loginLabel = new Label("Please sign in to your Google Account " + "to access the LifeBudget Application");
		Anchor signInLink = new Anchor("Sign In");
		signInLink.setHref(loginInfo.getLoginUrl());
		loginPanel.add(loginLabel);
		loginPanel.add(signInLink);
		RootPanel.get().add(loginPanel);

	}

	/**
	 * Handles the <code>Init</code> event, creating the view 
	 * components for initializing the app, adding them to the GWT Root
	 * panel.
	 * 
	 * Registers the viewport and center containers in the app's {@link Registry}.
	 */
	private void initUI() {
		viewport = new Viewport();
		viewport.setLayout(new BorderLayout());

		createNorth();
		// createWest();
		createCenter();
		createSouth();

		// registry serves as a global context
		Registry.register(VIEWPORT, viewport);
		Registry.register(CENTER_PANEL, center);

		RootPanel.get().add(viewport);
	}

	/**
	 * Creates the north "header" panel, including the logo, and 
	 * user controls.
	 */
	private void createNorth() {

		LayoutContainer northPanel = new LayoutContainer();
		northPanel.setStateful(false);

		BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 45);
		data.setMargins(new Margins());
		// build header container

		HBoxLayout hLayout = new HBoxLayout();
		hLayout.setPadding(new Padding(5));
		hLayout.setHBoxLayoutAlign(HBoxLayoutAlign.TOP);
		northPanel.setLayout(hLayout);

		// setup app title
		Widget appTitle = new HTML("<span id=\"appTitle\">LifeBudget</span>");
		Widget dotOrg = new HTML("<span class=\"loginControls\">.org</span>");

		// set up sign out hyperlink
		signOutLink = new Anchor("SignOut");
		signOutLink.setHref(loginInfo.getLogoutUrl());

		// assemble the header
		northPanel.add(appTitle, new HBoxLayoutData(new Margins(0, 5, 0, 0)));
		northPanel.add(dotOrg, new HBoxLayoutData(new Margins(0, 5, 0, 0)));
		HBoxLayoutData flex = new HBoxLayoutData(new Margins(0, 5, 0, 0));
		flex.setFlex(1);
		northPanel.add(new Text(), flex);
		northPanel.add(new HTML("<span class=\"loginControls\">" + loginInfo.getNickname() + " </span>"),
				new HBoxLayoutData(new Margins(0, 5, 0, 0)));
		northPanel.add(signOutLink, new HBoxLayoutData(new Margins(0, 5, 0, 0)));

		viewport.add(northPanel, data);
	}

	/**
	 * Creates the center panel, which is still empty at initialization, but 
	 * eventually has the TabView loaded into it.
	 */
	private void createCenter() {
		center = new LayoutContainer();
		center.setLayout(new FitLayout());

		BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);
		data.setMargins(new Margins(5, 5, 5, 5));

		viewport.add(center, data);
	}

	/**
	 * Creates the south container, which holds the footer.
	 */
	private void createSouth() {
		HtmlContainer southPanel = new HtmlContainer(
				"<img src=\"http://code.google.com/appengine/images/appengine-noborder-120x30.gif\"alt=\"Powered by Google App Engine\" />");
		southPanel.setStateful(false);
		BorderLayoutData data = new BorderLayoutData(LayoutRegion.SOUTH, 33);
		data.setMargins(new Margins());
		viewport.add(southPanel, data);
	}

	/* (non-Javadoc)
	 * @see com.extjs.gxt.ui.client.mvc.View#handleEvent(com.extjs.gxt.ui.client.mvc.AppEvent)
	 */
	protected void handleEvent(AppEvent event) {
		if (event.getType() == AppEvents.Init) {
			loginInfo = (LoginInfo) event.getData();
			initUI();
		}

		if (event.getType() == AppEvents.Login) {
			loginInfo = (LoginInfo) event.getData();
			initLogin();
		}
	}

}
